<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
     <style>
      .box{
          border: 1px black solid;
          width: 450px;
          margin: 40px auto;
         /* background-image: url(1.png); */
      }
      body{
        /* background-color:burlywood ; */
      }
     /* form{
        border: 1px black solid;
          width: 400px;
          margin: 40px auto;
          
     } */
      form{
          
          margin-top:50px;
          margin-bottom: 10px;
          
      }
      input{
          margin: 6px auto;
         
         /* float: left */
      }
      h2{
         
         position: relative;
         left: 50px;
         bottom: 5px;
      }
      fieldset{
          margin-bottom:15px; 
          padding-top:15px; 
      }
      .cleanfloat:after{
          content: "";
          display: block;
          clear: both;
          
      }
     .box2{
         width: 210px;
         height: 165px;
         /* border: 1px solid black; */
         float: right;
         margin-top:-194px; 
        
     }
     .imgname{
         width: 22px;
         height: 22px;
         border: 1px solid black;
         float: left;
         margin-right:5px; 
         margin-bottom:28px;
         background-image: url("img/6.jpg");
         background-repeat: no-repeat;
          
         /* background-position:-164px -18px;  */
         /* background-position:-371px -432px;  */

     }
     .namecheckmag{
         width: 177px;
         height: 22px;
         /* border: 1px solid black; */
         float: left;
         margin-bottom:28px;
         
     }
     
     </style>

     <script>
   
     window.onload=function(){
        var check=document.getElementById("checkall");
        var sport=document.getElementsByName("sport");
        check.onclick=function(){
            for(var i=0;i<sport.length;i++){
                     sport[i].checked=check.checked;
                    // alert("1");
            }                    
        };
       var fancheck=document.getElementById("fancheck");
       fancheck.onclick=function(){
            for(var i=0;i<sport.length;i++){
                   if(sport[i].checked==true){
                     sport[i].checked=false;
                   }else{
                    sport[i].checked=true;
                   }   
               }   
               check.checked=true;
            for(var i=0;i<sport.length;i++){
                   if(sport[i].checked==false){
                       check.checked=false;        
                   }
            }  
       };

    //    var tijiao=document.getElementById("tijiao");
    //    tijiao.onclick=function(){
    //     for(var i=0;i<sport.length;i++){
    //             if(sport[i].checked==true){
    //                 alert(sport[i].value);
    //             }
    //        }
    //    };

       for(var i=0;i<sport.length;i++){
           sport[i].onclick=function(){
               check.checked=true;
               for(var j=0;j<sport.length;j++){
                   if(sport[j].checked==false){
                          check.checked=false;
                          break;
                   }
               }
           };
       }
      //用户名，密码，邮箱的验证
      var namereg=/^[A-z]{1}[A-z0-9_]{5,9}$/;
      var passwordreg=/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/;
      var emailreg=/\w{1,}(\.)*(\w+)*@[A-z0-9]{1,}(\.com||\.cn)$/;

      var nameInput=document.getElementById("name");
      nameInput.onblur=function(){
            var namemag=document.getElementById("namemag");
            var name=document.getElementById("name");
            var imgname=document.getElementById("img_name");
            if(!namereg.test(name.value)){
                namemag.style.color="red";
                namemag.style.fontSize="15px";
                namemag.innerHTML="格式不正确";
                imgname.style.backgroundImage="url('img/6.jpg')";
                imgname.style.backgroundRepeat="no-repeat";
                imgname.style.backgroundPosition="-164px -18px";
            }else{
                namemag.style.color="green";
                namemag.style.fontSize="15px";
                namemag.innerHTML="用户名可用";
                imgname.style.backgroundImage="url('img/6.jpg')";
                imgname.style.backgroundRepeat="no-repeat";
                imgname.style.backgroundPosition="-371px -432px";
            }
            
      };
      var passwordInput=document.getElementById("password");
        passwordInput.onblur=function(){
            var passwordmag=document.getElementById("passwordmag");
            var password=document.getElementById("password");
            var imgpassword=document.getElementById("img_password");
            if(!passwordreg.test(password.value)){
                passwordmag.style.color="red";
                passwordmag.style.fontSize="15px";
                passwordmag.innerHTML="密码由8-16位的字母与数字组成";
                imgpassword.style.backgroundImage="url('img/6.jpg')";
                imgpassword.style.backgroundRepeat="no-repeat";
                imgpassword.style.backgroundPosition="-164px -18px";
            }else{
                passwordmag.style.color="green";
                passwordmag.style.fontSize="15px";
                passwordmag.innerHTML="密码强度高";
                imgpassword.style.backgroundImage="url('img/6.jpg')";
                imgpassword.style.backgroundRepeat="no-repeat";
                imgpassword.style.backgroundPosition="-371px -432px";
            }
            
      };
      var emailInput=document.getElementById("email");
        emailInput.onblur=function(){
            var emailmag=document.getElementById("emailmag");
            var email=document.getElementById("email");
            var imgemail=document.getElementById("img_email");
            if(!emailreg.test(email.value)){
                emailmag.style.color="red";
                emailmag.style.fontSize="15px";
                emailmag.innerHTML="邮箱地址无效";
                imgemail.style.backgroundImage="url('img/6.jpg')";
                imgemail.style.backgroundRepeat="no-repeat";
                imgemail.style.backgroundPosition="-164px -18px";
            }else{
                emailmag.style.color="green";
                emailmag.style.fontSize="15px";
                emailmag.innerHTML="邮箱地址有效";
                imgemail.style.backgroundImage="url('img/6.jpg')";
                imgemail.style.backgroundRepeat="no-repeat";
                imgemail.style.backgroundPosition="-371px -432px";
            }
            
      };
};
     </script>
</head>
<body>
          <div class="box cleanfloat">
            <form action="提交成功.html" name="userInfomation" class="box1">
                
                 
               
                <h2>用户注册</h2>
                <fieldset class="cleanfloat">
                    <legend>用户信息</legend>
                用户名<input type="text" name="username" id="name">
                <br><br> 密码&nbsp;&nbsp;&nbsp;&nbsp;<input type="password" name="possword" id="password">
                <br><br>邮箱 &nbsp;&nbsp;<input type="text" id="email">
                <br><br>
                性别<input type="radio" name="sex" value="man" id="nan"><label for="nan">男</label> 
                    <input type="radio" name="sex" value="woman" id="nv"><label for="nv">女</label><br><br>
                <div class="box2">
                <div class="imgname" id="img_name"></div>
                <div class="namecheckmag" id="namemag"></div>
                <div class="imgname" id="img_password"></div>
                <div class="namecheckmag" id="passwordmag"></div>
                <div class="imgname" id="img_email"></div>
                <div class="namecheckmag" id="emailmag"></div>
                </div>
               </fieldset>
               <fieldset>
                   <legend>用户爱好</legend>
                爱好 &nbsp; <input type="checkbox" name="sport" value="足球">足球
                <input type="checkbox" name="sport" value="篮球">篮球
                <input type="checkbox" name="sport" value="羽毛球">羽毛球
                <input type="checkbox" name="sport" value="乒乓球">乒乓球
                <input type="checkbox" name="sport" value="排球">排球<br>
                <input type="checkbox" id="checkall">全选
                
                <input type="button" id="fancheck" value="反选">
               
                <br><br>
                
                喜欢的明星<select name="start" id="" >
                    <optgroup label="男运动员">
                            <option value="yaoming">姚明</option>
                            <option value="liuxiang">刘翔</option>
                            <option value="sunyang">孙洋</option>
                            <option value="zhangjike">张继科</option>
                            <option value="yijianlian">易建联</option>
                    </optgroup>
                    <optgroup label="女运动员">
                            <option value="yaoming">傅园慧</option>
                            <option value="liuxiang">刘湘</option>
                            <option value="zhaolina">赵丽娜</option>
                            <option value="panxiaoting">潘晓婷</option>
                            <option value="lizijun">李子君</option>
                    </optgroup>
                </select><br><br>
                自我介绍<br>
                <textarea style="width: 300px;height: 100px;" name="selfInfo"></textarea>
                <br><br>
            </fieldset>
                <input type="submit" value="提交" style="margin-top:10px;">
                <input type="reset" value="重置" style="margin-top:10px;">
            </form>
            
          </div>
          
          
</body>
</html>